<template lang="pug">
// http://52.155.96.233/bms/d/6qvL9OvMz/bmsguan-li?orgId=1&refresh=5s&from=now-6h&to=now
.index-container

  div(style="margin-bottom:15px;") {{ $t('header.home') }}

  a-space(size="middle" )
    Profile
    chart-panel(title="G2电动")
      g2-gauge
    chart-panel(title="G2电量")
      Liquid
  a-divider
  a-space(size="middle" )
    a-button(@click="test") test
    chart-panel(title="电压")
      polygonal-chart
    Gauge(ref="ga" :size="250" :value="speed" :colors="colors")
    LineChart

</template>
<script lang="ts" setup>
import Gauge from '../car/gauge.vue'
import {ref} from 'vue'
import 'cron-schedule'
import ChartPanel from '~/car/ChartPanel.vue'
import {scheduler, five, timer} from '@/service/tasks'
import client, {bucket, org} from '@/service/influx'
import PolygonalChart from '~/car/PolygonalChart.vue'
import G2Gauge from '~/car/G2Gauge.vue'
import Liquid from '~/car/Liquid.vue'
import Profile from '~/car/Profile.vue'
import LineChart from '~/car/LineChart.vue'

const ga = ref()

const colors: [number, string][] = [
  [0.3, '#97e367'],
  [0.7, '#37dab9'],
  [1, '#fd6682']
]

const speed = ref(20)
const change = () => ga.value.commit(speed.value)

const rand = () => {
  speed.value = Math.floor(Math.random() * 120)
  ga.value.commit(speed.value)
}

let id: TimerHandler | null = null

const test = () => {
  if (id) {
    scheduler.clearTimeoutOrInterval(id)
    id = null
  } else {
    id = scheduler.setInterval(five, timer)
  }

  const queryApi = client.getQueryApi(org)

  const query = `from(bucket: "${bucket}")
  |> range(start: -5m)
  |> filter(fn: (r) => r["_measurement"] == "vehicle")
  |> filter(fn: (r) => r["_field"] == "acceleration_x" or r["_field"] == "acceleration_y"
  or r["_field"] == "acceleration_z")
  |> filter(fn: (r) => r["driver"] == "Anna Somerlie")
  |> aggregateWindow(every: 30s, fn: last, createEmpty: false)
  |> yield(name: "mean")`

  queryApi.collectRows(query).then(console.log)
}


</script>

<script lang="ts">
export default {
  name: 'DashBoard'
}
</script>

<style lang="scss" scoped>
.flow {
  position: absolute;
}
</style>
